{css href="/static/admin/css/style.css" /}
{css href="/static/admin/css/tabs-vertical.css" /}
{layout name="layout"}
{include file="public/nav"}

<div class="tabs-vertical">
    <ul>
        <li>
            <a class="tab-active" data-index="0" href="#">访问者信息</a>
        </li>
        <li>
            <a data-index="1" href="#">访问信息统计</a>
        </li>
        <li>
            <a data-index="2" href="#">访问时间统计</a>
        </li>
    </ul>

    <div class="tabs-content-placeholder">
        <div class="tab-content-active">
            <table class="table table-striped">
                <caption>访问者信息(仅显示最近访问的ip)</caption>
                <thead>
                <tr>
                    <th style="text-align: center">访问者ip</th>
                    <th style="text-align: center">使用平台</th>
                    <th style="text-align: center">使用浏览器</th>
                    <th style="text-align: center">首次上线时间</th>
                    <th style="text-align: center">最近上线时间</th>
                    <th style="text-align: center">访问次数</th>
                </tr>
                </thead>

                <tbody>
                {volist name="$visitors", id="visitor"}
                <tr>
                    <td>{$visitor.v_ip}</td>
                    <td>{$visitor.v_system}</td>
                    <td>{$visitor.v_browser}</td>
                    <td>{$visitor.v_time}</td>
                    <td>{$visitor.v_record}</td>
                    <td>{$visitor.v_number}</td>
                </tr>
                {/volist}
                </tbody>
            </table>

        </div>
        <div>
            <p>访问用户数量： {$v_data.number_ip} (人)</p>
            <p>网站点击量 {$v_data.number_all} (次)</p>
			
            
        </div>

        <div id="div1">
            <script>
                $.ajax({
                    method: "GET",
                    url: "/admin/getVisitor",
                    success: function(_data){
                        console.log(_data);
                        //数据
                        var data={
                            title:"用户上线时间分布图",
                            dataList:
                                [
                                    {name:"00:00-06:00(凌晨 清晨)",rate:_data['number_percentage_1_6'],color:"#f60"},
                                    {name:"06:00-12:00(早上 上午)",rate:_data['number_percentage_6_12'],color:"#64f"},
                                    {name:"12:00-18:00(下午 傍晚)",rate:_data['number_percentage_12_18'],color:"#0f6"},
                                    {name:"18:00-24:00(晚上)",rate:_data['number_percentage_18_24'],color:"#5d4"},
                                ]
                        }
                        //画布
                        var cvs=document.createElement("canvas");
                        var div1=document.getElementById("div1");
                        div1.appendChild(cvs);
                        cvs.width=760;
                        cvs.height=500;
                        cvs.style="display:block;margin:0 auto;background:#eee;";
                        var ctx=cvs.getContext("2d");
                        //绘制标题
                        ctx.font="16px 黑体";
                        ctx.textAlign="center";
                        ctx.textBaseline="midddle";
                        ctx.fillText(data.title,cvs.width/2,25);
                        //绘制左边实例图标
                        ctx.textAlign="left";
                        ctx.font="12px 微软雅黑";
                        ctx.textBaseline="bottom";
                        for(var i=0;i<data.dataList.length;i++)
                        {
                            ctx.beginPath();
                            ctx.arc(30,50+20*i,10,1.5*Math.PI-0.2*Math.PI,1.5*Math.PI+0.2*Math.PI,false);
                            ctx.lineWidth=5;
                            ctx.strokeStyle=data.dataList[i].color;
                            ctx.stroke();
                            ctx.fillText(data.dataList[i].name,45,50+20*i);
                        }
                        //绘制饼图
                        var startAngle=1.5*Math.PI;
                        var endAngle,lineAngle;
                        for(var j=0;j<data.dataList.length;j++)
                        {
                            ctx.beginPath();
                            ctx.moveTo(500,250);
                            endAngle=startAngle+data.dataList[j].rate*2*Math.PI;
                            ctx.arc(500,250,100,startAngle,endAngle,false);
                            ctx.closePath();
                            ctx.fillStyle=data.dataList[j].color;
                            ctx.fill();
                            startAngle=endAngle;
                            lineAngle=endAngle-data.dataList[j].rate*Math.PI-1.5*Math.PI;
                            ctx.beginPath();
                            ctx.moveTo(500+100*Math.sin(lineAngle),250-100*Math.cos(lineAngle));
                            ctx.lineTo(500+120*Math.sin(lineAngle),250-120*Math.cos(lineAngle));
                            ctx.textBaseline="midddle";
                            if(lineAngle<=Math.PI)
                            {
                                ctx.lineTo(500+120*Math.sin(lineAngle)+15,250-120*Math.cos(lineAngle));
                                ctx.textAlign="left";
                                ctx.fillText(data.dataList[j].name,500+120*Math.sin(lineAngle)+20,250-120*Math.cos(lineAngle));
                            }
                            else
                            {
                                ctx.lineTo(500+120*Math.sin(lineAngle)-15,250-120*Math.cos(lineAngle));
                                ctx.textAlign="right";
                                ctx.fillText(data.dataList[j].name,500+120*Math.sin(lineAngle)-20,250-120*Math.cos(lineAngle));
                            }
                            ctx.lineWidth=1;
                            ctx.strokeStyle=data.dataList[j].color;
                            ctx.stroke();
                        }
                        //生长动画
                        var overOver=document.createElement('canvas');
                        div1.appendChild(cvsOver);
                        cvsOver.width=cvs.width;
                        cvsOver.height=cvs.height;
                        div1.style.position="relative";
                        cvsOver.style.position="absolute";
                        cvsOver.style.top=0;
                        cvsOver.style.left=0;
                    }}
                    );

            </script>
        </div>

    </div>
</div>

<script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
<script>

    $(document).ready(function() {

        var widget = $('.tabs-vertical');

        var tabs = widget.find('ul a'),
            content = widget.find('.tabs-content-placeholder > div');

        tabs.on('click', function (e) {

            e.preventDefault();

            // Get the data-index attribute, and show the matching content div

            var index = $(this).data('index');

            tabs.removeClass('tab-active');
            content.removeClass('tab-content-active');

            $(this).addClass('tab-active');
            content.eq(index).addClass('tab-content-active');

        });

    });

</script>